<!--
 * @Author: your name
 * @Date: 2020-09-23 14:04:57
 * @LastEditTime: 2020-09-27 15:42:25
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \dangjian\src\components\dangjian\mall\supermarketMenu.vue
-->
<template>
  <ul class="top-menu">
    <li @click="go(0)" :class="{'active':routeName == '0'}"><span>红云热兑</span></li>
    <li @click="go(1)" :class="{'active':routeName == '1'}"><span>乐享乐购</span></li>
    <li @click="go(2)" :class="{'active':routeName == '2'}"><span>景区畅游</span></li>
    <li @click="go(3)" :class="{'active':routeName == '3'}"><span>课程体验</span></li>
  </ul>
</template>

<script>
  export default {
    name: '',
    props: ['id', 'data', 'isShow'],
    components: {
    },
    data () {
      return {
        num: 0,
        routeName: ''
      }
    },
    created () {
      this.routeName = this.num
    },
    methods: {
      go (num) {
        this.routeName = num
        this.$emit('showFun',num);
        sessionStorage.setItem("menuIndex",JSON.stringify(num));
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .top-menu {
    display:flex;
    justify-content:space-around;
    padding:0 pxToRem(0px);
    background:rgba(255,255,255,1);
    border: 1px solid #E5E5E5;
    li {
      font-size:14PX;
      font-weight:400;
      width:20%;
      flex-shrink:0;
      text-align: center;
      color:rgba(0,0,0,1);
      padding:pxToRem(10px) 0;
      line-height:pxToRem(60px);
      &.active {
        border-bottom:2PX solid $theme-color;
        font-weight:bold;
        color:rgba(226,0,1,1);
        span {
          font-size: 16PX;
        }
      }
      span {
        font-size: 14PX;
        font-weight: bold;
      }
    }
  }
</style>
